<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入依赖包 -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 容器 -->
    <div id="app">
        <button @click="handler">点击我获取DOM元素</button>
        <p v-if='show' ref="cur">我是一个段落</p>
    </div>
</body>

</html>
<script>


    let vm = new Vue({
        el: '#app',
        data() {
            return {
                show: false
            }
        },
        methods: {
            handler() {
                //v-if:本身模板中就没有p标签
                //当你点击p标签的时候,响应式发生变化(修改)，页面要重新渲染，渲染p标签也要时间啊
                //不可能数据发生变化,渲染结构立马完毕[不可能！！！]
                this.show = true;
                //获取p标签:异步语句
                this.$nextTick(() => {
                    console.log(this.$refs.cur);
                });
                console.log(123);
            }
        },

    })

     //$nextTick学习
     //官网定义:在下次DOM更新循环结束 之后执行延迟回调。获取(更新后)的 DOM
     //在修改数据之后立即使用这个方法，获取更新后的 DOM。


</script>